<template>
  <div>

    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="Chose your Activity" style="padding-left:60px;font-weight: bold">
        <el-select v-model="form.activity" prop="activity" multiple="multiple">
          <el-option value="shop voucher"> shop voucher</el-option>
          <el-option value="product voucher">product voucher</el-option>
          <el-option value="discount">discount</el-option>
          <el-option value="bundle deal">bundle deal</el-option>
          <el-option value="add-on deal">add-on deal</el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <shop-voucher-table v-if="form.activity.indexOf('shop voucher')!==-1"></shop-voucher-table>
    <product-voucher-table v-if="form.activity.indexOf('product voucher')!==-1"></product-voucher-table>
    <discount-table v-if="form.activity.indexOf('discount')!==-1"></discount-table>
    <bundle-deal-table v-if="form.activity.indexOf('bundle deal')!==-1"></bundle-deal-table>
    <AddOnDealTable v-if="form.activity.indexOf('add-on deal')!==-1"></AddOnDealTable>
  </div>
</template>

<script>
import ShopVoucherTable from "@/components/tools/CreateShopVoucherTable"
import ProductVoucherTable from "@/components/tools/CreateProductVoucherTable"
import DiscountTable from "@/components/tools/CreateDiscountTable"
import BundleDealTable from "@/components/tools/CreateBundleDealTable"
import AddOnDealTable from "@/components/tools/CreateAddOnDealTable"

export default {
  name: "MktActivity",
  data() {
    return {
      form: {
        activity: ['shop voucher','product voucher','discount','bundle deal', 'add-on deal']
      }
    }
  },
  components: {
    ShopVoucherTable,
    ProductVoucherTable,
    DiscountTable,
    BundleDealTable,
    AddOnDealTable,
  }
}
</script>

<style scoped>

</style>
